*,
view,
page,
text,
image,
slider,
textarea {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-break: normal !important;
    word-wrap: break-word !important;
    -webkit-tap-highlight-color: transparent;
    /*手机端点击底部出现背景*/
    -webkit-overflow-scrolling: touch;
    /*苹果手机端滑动卡屏*/
    -webkit-font-smoothing: antialiased;

}

text {
    line-height: 1.4;
}

image {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    // width: auto;
    // height: auto;
    // will-change: transform
}

input,
textarea {
    font-size: 28rpx;
    box-sizing: border-box;
}

button {
    font-size: 28rpx;
    background-color: transparent;
    margin: 0;
    padding: 0;
    border-radius: 0rpx;
    -webkit-border-radius: 0rpx;
    -moz-border-radius: 0rpx;
    -ms-border-radius: 0rpx;
    -o-border-radius: 0rpx;
}

button::after {
    border: none !important;
}

.placeholder {
    color: #999999;
    font-size: 28rpx;
}

.section_tabs {
    position: relative;
    z-index: 10;
}

.section_refresh {
    position: relative;
    z-index: 9;
    overflow: hidden;
}

page {

    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    --placeholder-color: pink;
    --main-theme-color: #1FD1C2;
    --primary-theme-color: #1FD1C2;
    --theme-color: #1FD1C2;
    --theme-color2: #E85827;
    --home-theme-color: #191638;
    --home-blue-color: #5616c0;
    --primary-bg-color: #1FD1C2;

    --color1: #1FD1C2;
    --color2: #E85827;
    --color3: #61411E;
    --color4: #5616c0;

    --tt: #282828;
    --tt2: #222222;
    --tt3: #3F3F3F;
    --dd: #E0E0E0;
    --dd2: #909090;
    --dd3: #909090;
    --dd4: #909090;
    --ff: #fff;

    --bg: #f7f7f7;
    --pagebg: #f2f2f2;
    --name: #7D5449;
    // --color4: #5616c0;

    --n48: 48rpx;
    --n46: 46rpx;
    --n40: 40rpx;
    --n38: 38rpx;
    --n36: 36rpx;
    --n35: 35rpx;
    --n30: 30rpx;
    --n28: 28rpx;
    --n26: 26rpx;
    --n24: 24rpx;
    --n22: 22rpx;

    --n20: 20rpx;
    --n16: 16rpx;
    --n10: 10rpx;
    --n8: 8rpx;
    --n6: 6rpx;
    --n4: 4rpx;


    --com_gap: 30rpx;
    --gap: 20rpx;
    --ios_bot: env(safe-area-inset-bottom);
}

page {
    background: #383950;
    min-height: 100vh;
}

.page_main {
    background: #383950;
    min-height: 100vh;
}


.page_tran {
    background: transparent;
}

// 底部白色快
.page_gradient {
    // background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(246, 247, 250, 1), rgba(246, 247, 250, 1), rgba(246, 247, 250, 0.5), rgba(255, 255, 255, 1));
    background: linear-gradient(180deg, #fefefe, #eaedf2, #eaedf2, #eaedf2, #f8f9fb, #fcfcfd, #fcfcfd);
}

// 底部灰色快
.user_gradient {
    background: linear-gradient(180deg, #fefefe, #eaedf2, #eaedf2)
}

// 个人设置底部灰色快
.set_gradient {
    background: linear-gradient(180deg, #fefefe, #eaedf2, #eaedf2, #eaedf2, #eaedf2)
}

// 爱车背景
.car_gradient {
    // background: linear-gradient(180deg, #fefefe, #e9ecf2, #e9ecf2, #e9ecf2, #e9ecf2)
    background: #e9ecf2;
}

// 商城灰色背景
.gray_gradient {
    background: #f5f7f9;
}

// 商城白色背景
.white_gradient {
    background: #ffffff;
}

// 关闭按钮
.com_close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: 60rpx;
    height: 60rpx;

    display: flex;
    align-items: center;
    justify-content: center;

}

.com_close_img {
    width: 20rpx;
    height: 20rpx;
}



// 加减输入框
.com_add_less_inp {
    display: flex;
    align-items: center;

    .icons {
        flex-shrink: 0;
        // width: 54rpx;
        // height: 45rpx;
        width: 26rpx;
        height: 26rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            transform: scale(2);
        }

        .com_add_less_inp_img {
            width: 26rpx;
            height: 26rpx;
            display: block;
        }
    }

    .num_wrap {
        flex: 1;
        min-width: 80rpx;
        max-width: 200rpx;

        height: 44rpx;
        line-height: 44rpx;
        background: #E8EBF1;
        border-radius: 10rpx;
        margin: 0 15rpx;

        .num_input {
            height: 100%;
            padding: 0 10rpx;
            font-size: 28rpx;
            line-height: 28rpx;
            font-weight: normal;
            color: #333333;
            text-align: center;
            // background-color: pink;
        }
    }
}

.com_car_icon {
    height: 36rpx;
    line-height: 36rpx;
    background: var(--status_b);
    color: var(--status_c);
    border-radius: 18rpx;
    border: 1rpx solid #ECEFF4;
    -webkit-border-radius: 18rpx;
    -moz-border-radius: 18rpx;
    -ms-border-radius: 18rpx;
    -o-border-radius: 18rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20rpx;
    font-weight: 400;
    padding: 0 14rpx 0 12rpx;

    &+.com_car_icon {
        margin-left: 10rpx;
    }

    .img {
        margin-right: 2rpx;
        width: 22rpx;

    }
}

// 按钮背景色
.color_stauts {

    // 灰色背景 
    &.gray_b {
        --status_b: #EAEDF2;
        --status_c: #999999;
    }

    // 爱车状态灰色背景 
    &.car_gray_b {
        --status_b: #F8F8F8;
        --status_c: #999999;
    }

    // 白色背景 主题色边框
    &.w_b {
        --status_b: #ffffff;
        --status_c: #1FD1C2;
        border: 1rpx solid #1FD1C2;
    }

    // 主题色背景 
    &.g_b {
        --status_b: #1FD1C2;
        --status_c: #ffffff;
    }


    // 报警主题色 
    &.wrong_b {
        --status_b: #ff5656;
        --status_c: #ffffff;
    }
}

.delete_msg {
    height: 98rpx;
    background: #FFFFFF;
    border-radius: 20rpx;

    font-size: 32rpx;
    font-weight: 500;
    color: #E30000;
    display: flex;
    align-items: center;
    justify-content: center;
}

// 通用圆点
.com_yuan {
    position: relative;
    display: flex;
    // align-items: center;

    &::before {
        content: '';
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        background-color: #FF5656;
        position: absolute;
        left: -14rpx;
        top: 50%;
        transform: translate(-100%, -50%);
        -webkit-transform: translate(-100%, -50%);
        -moz-transform: translate(-100%, -50%);
        -ms-transform: translate(-100%, -50%);
        -o-transform: translate(-100%, -50%);
    }
}

// 右上角 角标
.notice_view {

    position: relative;
    padding-right: 36rpx;

    --color: #e30000;

    &.green_view {
        --color: #1FD1C2;
    }

    &::after {
        content: '';
        position: absolute;
        right: 12rpx;
        top: 50%;
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        background-color: var(--color);
        transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
    }
}

.page_btn_bot {
    padding: 12rpx 36rpx;
    // background-color: #fff;
}

.com_lr_border_btn {
    display: flex;
    align-items: center;
    width: 100%;

    .is_l {
        border-radius: 39rpx 0 0 39rpx !important;
        -webkit-border-radius: 39rpx 0 0 39rpx !important;
        -moz-border-radius: 39rpx 0 0 39rpx !important;
        -ms-border-radius: 39rpx 0 0 39rpx !important;
        -o-border-radius: 39rpx 0 0 39rpx !important;
    }

    .is_r {
        border-radius: 0 39rpx 39rpx 0 !important;
        -webkit-border-radius: 0 39rpx 39rpx 0 !important;
        -moz-border-radius: 0 39rpx 39rpx 0 !important;
        -ms-border-radius: 0 39rpx 39rpx 0 !important;
        -o-border-radius: 0 39rpx 39rpx 0 !important;
    }
}

.bot_btn {
    display: flex;
}

.com_bot_btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    // width: 100%;

    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    -webkit-border-radius: 44rpx;
    -moz-border-radius: 44rpx;
    -ms-border-radius: 44rpx;
    -o-border-radius: 44rpx;
    color: #ffffff;
    background: #1FD1C2;

    .tt {
        color: #ffffff;
        font-size: 32rpx;
        font-weight: bold;
    }

    &.istran {
        border: 2rpx solid #1FD1C2;
        color: #1FD1C2;
        background: transparent;

        .tt {
            color: #1FD1C2;
            font-size: 32rpx;
            font-weight: bold;
        }
    }

    &.iswarn {
        background: #E30000;
    }

    &.dis {
        background: #c1c1c1;
        pointer-events: none;
    }


    &.is78 {
        height: 78rpx;
        line-height: 78rpx;
        border-radius: 40rpx;
        -webkit-border-radius: 40rpx;
        -moz-border-radius: 40rpx;
        -ms-border-radius: 40rpx;
        -o-border-radius: 40rpx;
    }

    &.is98 {
        height: 98rpx;
        line-height: 98rpx;
        border-radius: 50rpx;
        -webkit-border-radius: 50rpx;
        -moz-border-radius: 50rpx;
        -ms-border-radius: 50rpx;
        -o-border-radius: 50rpx;
    }
}



.com_tt {
    --theme_color: #333333;
    color: #333333;

    &.dark {
        --theme_color: #ffffff;
        color: #ffffff;

        .navtop_tt {
            color: #ffffff;
        }
    }

    .navtop_tt {
        color: #333333;
    }
}

.index_message {
    height: 64rpx;
    line-height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    --theme_color: #333333;

    // background-color:pink;
    .left_view,
    .right_view {
        position: absolute;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .title {
        font-weight: 700;
        font-size: 32rpx;
        // color: var(--theme_color);
    }

    .left_view {
        left: 0;
        padding: 0 30rpx;
    }

    .right_view {
        right: 0;
        padding: 0 30rpx;
    }

    .left_icon_img {
        // color: var(--theme_color);
        width: 40rpx;
        height: 40rpx;
    }



    .setting_icon {
        width: 50rpx;
        height: 50rpx;

        &+.setting_icon {
            margin-left: 30rpx;
        }
    }

    .index_view {

        height: 50rpx;
        background: #3F425A;
        border-radius: 25rpx;
        -webkit-border-radius: 25rpx;
        -moz-border-radius: 25rpx;
        -ms-border-radius: 25rpx;
        -o-border-radius: 25rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20rpx;

        .view_icon {
            width: 32rpx;
            height: 32rpx;
        }

        .tt {
            color: #999999;
            font-size: 24rpx;
        }

        &+.index_view {
            margin-left: 12rpx;
        }
    }

}

.car_top {
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    // 爱车页
    .my_number {
        padding: 0 30rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
        display: flex;
        align-items: center;

        .n_icon {
            margin-left: 12rpx;
            width: 12rpx;
        }
    }

    .car_right_view {

        padding: 0 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;


    }
}





// 颜色样式
.bgff {
    background-color: var(--ff);
}

.pagebg {
    background-color: var(--pagebg);
}

.color1 {
    color: #1FD1C2;
}

.color2 {
    color: var(--color2);
}

.color3 {
    color: var(--color3);
}

.color4 {
    color: var(--color4);
}

.colortt {
    color: var(--tt);
}

.colortt2 {
    color: var(--tt2);
}

.colortt3 {
    color: var(--tt3);
}

.colorff {
    color: var(--ff);
}

.colordd {
    color: var(--dd);
}

.colordd2 {
    color: var(--dd2);
}

.colordd3 {
    color: var(--dd3);
}

.colordd4 {
    color: var(--dd4);
}

.tac {
    text-align: center;
}

.fz48 {
    font-size: var(--n48);
}

.fz46 {
    font-size: var(--n46);
}

.fz40 {
    font-size: var(--n40);
}

.fz38 {
    font-size: var(--n38);
}

.fz36 {
    font-size: var(--n36);
}

.fz30 {
    font-size: var(--n30);
}

.fz28 {
    font-size: var(--n28);
}

.fz26 {
    font-size: var(--n26);
}

.fz24 {
    font-size: var(--n24);
}

.fz22 {
    font-size: var(--n22);
}

.fz20 {
    font-size: var(--n20);
}



.lh1 {
    line-height: 1;
}

.lh11 {
    line-height: 1.1;
}

.lh15 {
    line-height: 1.5;
}

.lh16 {
    line-height: 1.6;
}

.lh17 {
    line-height: 1.7;
}

.lh18 {
    line-height: 1.8;
}

.lh2 {
    line-height: 2;
}

// 覆盖全部的遮罩
.haszz {
    .myzz {
        position: relative;
        z-index: 5;

        &::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            // background-color: rgba(0, 0, 0, 0.1);
            // linear-gradient(90deg, #fff, rgba(255, 255, 255, 0))
            background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.75), rgba(255, 255, 255, 0));

            z-index: 3;
        }

        &.zz05 {
            &::after {
                background-color: rgba(0, 0, 0, 0.05);
            }
        }

        &.zz2 {
            &::after {
                background-color: rgba(0, 0, 0, 0.2);
            }
        }

        &.zz3 {
            &::after {
                background-color: rgba(0, 0, 0, 0.3);
            }
        }

        &.zz4 {
            &::after {
                background-color: rgba(0, 0, 0, 0.4);
            }
        }

        &.zz5 {
            &::after {
                background-color: rgba(0, 0, 0, 0.5);
            }
        }

        &.zz65 {
            &::after {
                background-color: rgba(0, 0, 0, 0.65);
            }
        }
    }

}

.com-dis {
    background: #DBDBDB !important;
    color: #515050 !important;
}


.ell {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.ell2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ell3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.ell4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.ell-5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

.jj_kk_b,
.jj_kk_a,
.jj_kt_a,
.jj_kt_b,
.jj_kb_a,
.jj_kb_b,
.jj_kl_a,
.jj_kl_b,
.jj_kr_a,
.jj_kr_b {
    position: relative;
    --line: #ddd;
}

.jj_kk_a:after,
.jj_kk_b:before {
    border: 1px solid var(--line);
    width: 300%;
    height: 300%;
    top: 50%;
    left: 50%;
    -webkit-transform: scale(0.33333333333333333334) translate(-150%, -150%);
    transform: scale(0.33333333333333333334) translate(-150%, -150%);
    z-index: 1;
    content: '';
    display: block;
    position: absolute;
    box-sizing: border-box;
}


.jj_kl_a:after,
.jj_kl_b:before {
    background: var(--line);
    width: 1px;
    height: 100%;
    top: 50%;
    left: 0;
    transform: translate(-33.333333%, -50%) scale(0.3333333, 1);
    z-index: 1;
    content: '';
    display: block;
    position: absolute;
    -webkit-transform: translate(-33.333333%, -50%) scale(0.3333333, 1);
    -moz-transform: translate(-33.333333%, -50%) scale(0.3333333, 1);
    -ms-transform: translate(-33.333333%, -50%) scale(0.3333333, 1);
    -o-transform: translate(-33.333333%, -50%) scale(0.3333333, 1);
}

.jj_kr_a:after,
.jj_kr_b:before {
    background: var(--line);
    width: 1px;
    height: 100%;
    top: 50%;
    right: 0;
    transform: translate(33.333333%, -50%) scale(0.3333333, 1);
    z-index: 1;
    content: '';
    display: block;
    position: absolute;
    -webkit-transform: translate(33.333333%, -50%) scale(0.3333333, 1);
    -moz-transform: translate(33.333333%, -50%) scale(0.3333333, 1);
    -ms-transform: translate(33.333333%, -50%) scale(0.3333333, 1);
    -o-transform: translate(33.333333%, -50%) scale(0.3333333, 1);
}

.jj_kt_a:after,
.jj_kt_b:before {
    background: var(--line);
    width: 100%;
    height: 1px;
    top: 0;
    left: 50%;
    transform: translate(-50%, -33.333333%) scale(1, 0.3333333);
    z-index: 1;
    content: '';
    display: block;
    position: absolute;
    -webkit-transform: translate(-50%, -33.333333%) scale(1, 0.3333333);
    -moz-transform: translate(-50%, -33.333333%) scale(1, 0.3333333);
    -ms-transform: translate(-50%, -33.333333%) scale(1, 0.3333333);
    -o-transform: translate(-50%, -33.333333%) scale(1, 0.3333333);
}

.jj_kb_a:after,
.jj_kb_b:before {
    background: var(--line);
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 33.333333%) scale(1, 0.3333333);
    z-index: 1;
    content: '';
    display: block;
    position: absolute;
    -webkit-transform: translate(-50%, 33.333333%) scale(1, 0.3333333);
    -moz-transform: translate(-50%, 33.333333%) scale(1, 0.3333333);
    -ms-transform: translate(-50%, 33.333333%) scale(1, 0.3333333);
    -o-transform: translate(-50%, 33.333333%) scale(1, 0.3333333);
}


.imgabs {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.re {
    position: relative;
}

.z1 {
    z-index: 1;
}

.z2 {
    z-index: 2;
}

.z3 {
    z-index: 3;
}

.z4 {
    z-index: 4;
}

.z5 {
    z-index: 5;
}

.z6 {
    z-index: 6;
}

.z7 {
    z-index: 7;
}

.z8 {
    z-index: 8;
}

.z9 {
    z-index: 9;
}

.z10 {
    z-index: 10;
}

.maxBox {
    width: 100%;
    height: 100%;
}




[class*=mygrid] {
    display: grid;
}

.mygrid {
    display: grid;
}

.mygrid4,
.mygrid4-2 {
    grid-template-columns: repeat(4, 1fr);
}

.mygrid3,
.mygrid3-2 {
    grid-template-columns: repeat(3, 1fr);
}

.mygrid2 {
    grid-template-columns: repeat(2, 1fr);
}

.mygrid1 {
    grid-template-columns: repeat(1, 1fr);
}


.com_ff_bg {
    background: #FFFFFF;
    border-radius: 20rpx;
    margin: 20rpx 20rpx 0;
    box-shadow: 0rpx 0rpx 7rpx 1rpx rgba(68, 68, 68, 0.05);

    &:last-child {
        margin-bottom: 20rpx;
    }
}

.com_tr_bg {
    background: #3F425A;
    border-radius: 10rpx;
    -webkit-border-radius: 10rpx;
    -moz-border-radius: 10rpx;
    -ms-border-radius: 10rpx;
    -o-border-radius: 10rpx;

}

// 同级元素间距
.com_view {
    &+.com_view {
        margin-top: 20rpx;
    }
}

.com_pad {
    padding-left: 30rpx;
    padding-right: 30rpx;
}

.com_lr {
    margin-left: 30rpx;
    margin-right: 30rpx;
}



.com_top {
    margin-top: 30rpx;
}

// .com_top {
// 	margin-top: 20rpx;
// }

.com_bottom {
    margin-bottom: 30rpx;
}

.com_r45 {
    border-radius: 45rpx;
    -webkit-border-radius: 45rpx;
    -moz-border-radius: 45rpx;
    -ms-border-radius: 45rpx;
    -o-border-radius: 45rpx;
}

.com_r24 {
    border-radius: 24rpx;
    -webkit-border-radius: 24rpx;
    -moz-border-radius: 24rpx;
    -ms-border-radius: 24rpx;
    -o-border-radius: 24rpx;
}

.com_kefu {
    position: relative;

    .iskefu {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
    }
}

// 项目特定复用样式


.active_tag {
    flex-wrap: wrap;
    gap: 10rpx;

    .tag_it {
        height: 42rpx;
        line-height: 42rpx;
        background: #FFF1E7;
        border-radius: 21rpx;
        padding: 0 26rpx;
        font-size: 24rpx;
        color: var(--color2);

        // &+.tag_it {
        // 	margin-left: 10rpx;
        // }
    }
}

// grid-column-gap: 1rem;
// grid-row-gap: 1rem;

.com_ii {
    width: 20rpx;
    margin-left: 4rpx;
}

.com_img {
    width: 100%;
}


// 修改图片颜色
.com_chang_img_color {
    --icon_color: #FFFFFF;

    &.on {
        --icon_color: #1FD5CA;
    }

    .chang_img {
        --width: 62rpx;
        --height: 62rpx;

        width: var(--width);
        height: var(--height);
        overflow: hidden;

        .chang_icon {
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);

            width: var(--width);
            height: var(--width);
            border-right: var(--width) solid transparent;
            box-sizing: content-box;
            filter: drop-shadow(var(--width) 0rpx var(--icon_color));
            -webkit-backdrop-filter: drop-shadow(var(--width) 0 var(--icon_color));
            -webkit-filter: drop-shadow(var(--width) 0rpx var(--icon_color));

        }
    }
}


.page_card_p {
    padding-bottom: 26rpx;
}

.page_card {
    margin-left: 30rpx;
    margin-right: 30rpx;

    &+.page_card {
        margin-top: 26rpx;
    }



    .card_tt {
        font-size: 32rpx;
        font-weight: 400;
        color: #FFFFFF;
        margin-bottom: 14rpx;


        display: flex;
        align-items: center;

        .tips_icon {
            width: 26rpx;
            height: 26rpx;
            margin-left: 10rpx;
        }
    }

    .card {
        background-color: #3F425A;
        border-radius: 10rpx;
    }

    .empty {
        height: 168rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .empty_btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200rpx;
            height: 70rpx;
            background: #1FD5CA;
            border-radius: 8rpx;
            -webkit-border-radius: 8rpx;
            -moz-border-radius: 8rpx;
            -ms-border-radius: 8rpx;
            -o-border-radius: 8rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #FFFFFF;
        }
    }

}




.max100 {
    width: 100%;
    height: 100%;
}

.flex {
    display: flex;
}

.flex-bet {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.column {
    flex-direction: column;
}

.flex0 {
    flex-shrink: 0;
}

.flex1 {
    flex: 1;
}

.alignS {
    align-items: flex-start;
}

.alignC {
    align-items: center;
}

.alignE {
    align-items: flex-end;
}

.justS {
    justify-content: flex-start;
}

.justC {
    justify-content: center;
}

.justA {
    justify-content: space-around;
}

.justB {
    justify-content: space-between;
}

.justE {
    justify-content: flex-end;
}

.oh {
    overflow: hidden;
}



//全局动画


// init 
.time02 {
    transition: all 0.2s;
}

.time03 {
    transition: all 0.3s;
}

.time04 {
    transition: all 0.4s;
}

.time05 {
    transition: all 0.5s;
}

.time06 {
    transition: all 0.6s;
}

.time07 {
    transition: all 0.7s;
}

.time1 {
    transition: all 1s;
}

@keyframes rubberBand {

    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform:
            scale3d(1, 1, 1);
        opacity: 0;
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15,
                0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
        opacity: 1;
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform:
            scale3d(.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

.rubberBand {
    -webkit-animation-name:
        rubberBand;
    opacity: 0;
    animation-name: rubberBand;
    animation-fill-mode: forwards;
}


@keyframes rightIn {
    0% {
        transform: translate(750rpx);
    }

    100% {
        transform: translate(0rpx);
    }
}

.rightToleft {
    transform: translate(750rpx);
    animation-name: rightIn;
    animation-duration: .8s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s; // 延迟
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

@keyframes rightIn100 {
    0% {
        opacity: 0;
        transform: translate(100%, 0);
    }

    100% {
        opacity: 1;
        transform: translate(0%, 0);
    }
}

.rightToleft100 {
    opacity: 0;
    transform: translate(100%, 0);
    animation-name: rightIn100;
    animation-duration: .8s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    //延迟animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    -webkit-transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
}

@keyframes upIn {
    0% {
        transform: translate(0, 40%);
        opacity: 0;
    }

    100% {
        transform: translate(0%);
        opacity: 1;
    }
}

.upIn {
    opacity: 0;
    transform: translate(0, 40%);
    animation-name: upIn;
    animation-duration: .2s;
    animation-timing-function: linear;
    animation-delay: 0s; // 延迟
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

@keyframes upIn100 {
    0% {
        transform: translate(0, 750rpx);
        opacity: 0;
    }

    100% {
        transform: translate(0rpx);
        opacity: 1;
    }
}

.upIn100 {
    opacity: 0;
    transform: translate(0, 750rpx);
    animation-name: upIn100;
    animation-duration: .4s;
    animation-timing-function: linear;
    animation-delay: 0s; // 延迟
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

@keyframes topIn100 {
    0% {
        transform: translate(0, -100%);
        // opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.topIn100 {
    // opacity: 0;
    transform: translate(0, -100%);
    animation-name: topIn100;
    animation-duration: .4s;
    animation-timing-function: linear;
    animation-delay: 0s; // 延迟
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

@keyframes scaleOut {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
        -webkit-transform: scale(1.15);
        -moz-transform: scale(1.15);
        -ms-transform: scale(1.15);
        -o-transform: scale(1.15);
    }
}

.scaleOut {
    transform: scale(1);
    animation-name: scaleOut;
    animation-duration: .8s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s; // 延迟
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

@keyframes scaleOut_one {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
}

.scaleOut_one {
    transform: scale(1);
    animation-name: scaleOut_one;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    // animation-delay: 0s; // 延迟
    // animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}


@keyframes tool_ani {
    0% {
        opacity: 0;
        transform: translate(0, 100%);
    }

    // 20% {
    //     opacity: 0.4;
    //     transform: translate(0,40%);
    // }

    100% {
        opacity: 1;
        transform: translate(0, 0%);
    }
}

@keyframes logo_ani {
    // 0% {
    //      opacity: 0.5;
    //      transform: scale(1);
    //  }
    // 25% {
    //     opacity: 1;
    //    transform: scale(1.1);
    // }
    // 50% {
    //     opacity: 0.5;
    //    transform: scale(1);
    // }
    // 75% {
    //     opacity: 0.75;
    //    transform: scale(1);
    // }
    //  100% {
    //      opacity: 1;
    //      transform: scale(1);
    //  }

    0% {
        opacity: 0.5;
        transform: translate(-100%, 0) scale(1);
    }

    25% {
        opacity: 1;
        transform: translate(0%, 0) scale(1);
    }

    50% {
        // opacity: 0.5;
        opacity: 1;
        transform: scale(1);
    }

    75% {
        // opacity: 0.75;
        opacity: 1;
        transform: translate(0%, 0) scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}


.de01 {
    animation-delay: 0.1s;
}

.de02 {
    animation-delay: 0.2s;
}

.de03 {
    animation-delay: 0.3s;
}

.de04 {
    animation-delay: 0.4s;
}

.de05 {
    animation-delay: 0.5s;
}

.de10 {
    animation-delay: 1s;
}

.de15 {
    animation-delay: 1.5s;
}

.de2 {
    animation-delay: 2s;
}

.du02 {
    animation-duration: 0.2s;
}

.du03 {
    animation-duration: 0.3s;
}

.du04 {
    animation-duration: 0.4s;
}

.du05 {
    animation-duration: 0.5s;
}

.du06 {
    animation-duration: 0.6s;
}

.du07 {
    animation-duration: 0.7s;
}

.du1 {
    animation-duration: 1s;
}

.du13 {
    animation-duration: 1.3s;
}

.du15 {
    animation-duration: 1.5s;
}






/*自定义checkbox  勾选*/
.ucheckbox {
    --icon_color: #FFFFFF;
    --bg_color: #FFFFFF;

    position: relative;
    // width: 36rpx;
    // height: 36rpx;
    // line-height: 36rpx;
    // border: 2rpx solid #CCCCCC;
    border-radius: 50%;
    // font-size: 0;
    text-align: center;

    width: 26rpx;
    height: 26rpx;
    background: var(--bg_color);
    color: var(--icon_color);

    opacity: 1;
    // #707070
    // EAEDF2
    // #c9c9c9
    border: 2rpx solid #1FD1C2;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: scale(2.5);
        -webkit-transform: scale(2.5);
        -moz-transform: scale(2.5);
        -ms-transform: scale(2.5);
        -o-transform: scale(2.5);
    }

    .gou {
        font-size: 12rpx;
        line-height: 24rpx;
    }

    &.tran {
        --icon_color: transparent;
        --bg_color: transparent;

        // background: transparent;
        // border: 1rpx solid #fff;

    }

    &.isadd_list {

        width: 30rpx;
        height: 30rpx;

        .gou {
            font-size: 14rpx;
            line-height: 30rpx;
        }

        &.on {
            border: 1rpx solid transparent;
        }
    }

    &.on {
        --icon_color: #ffffff;
        --bg_color: #1FD1C2;
        border: 1rpx solid #1FD1C2;
        // background: var(--bg_color);
        // color: var(--icon_color);

        // font-size: 14rpx;
        // background-color: #343434;

    }

    // &.dis {
    // 	border-color: #a8a8a8;
    // 	color: #a8a8a8;
    // 	box-shadow: none;
    // }
}

.langheight {
    height: var(--status-bar-height);
}

.pageLeftlogoview {
    padding-left: 30rpx;

    // &.page_shop {
    // 	width: 548rpx;
    // }

    .pageLeftlogo {
        height: 46rpx;
        // 
        opacity: 0;
        // &.test{
        //     animation: logo_ani 1000ms linear 500ms 1 normal forwards;
        // }
        animation: logo_ani 1000ms linear 500ms 1 normal forwards;

    }

    .view_search {
        --com_num: 52rpx;
        // 
        opacity: 0;
        // &.test{
        //     animation: logo_ani 1000ms linear 500ms 1 normal forwards;
        // }
        animation: logo_ani 1000ms linear 500ms 1 normal forwards;
        -webkit-animation: logo_ani 1000ms linear 500ms 1 normal forwards;

        &.on {
            .view_search_cc {
                .view_r {
                    width: 436rpx;
                    padding: 0 18rpx 0 0;
                }
            }
        }

        .view_search_cc {
            height: 54rpx;
            border: 1rpx solid #A6A6A6;
            border-radius: 27rpx;
            -webkit-border-radius: 27rpx;
            -moz-border-radius: 27rpx;
            -ms-border-radius: 27rpx;
            -o-border-radius: 27rpx;

            display: flex;

            .view_l {
                width: var(--com_num);
                height: var(--com_num);
                display: flex;
                align-items: center;
                justify-content: center;

                .seach_icon {
                    width: 20rpx;
                    height: 20rpx;
                }
            }

            .view_r {
                width: 0;
                padding: 0;
                transition: all .2s cubic-bezier(.02, .54, .58, 1);
                -webkit-transition: all .2s cubic-bezier(.02, .54, .58, 1);
                -moz-transition: all .2s cubic-bezier(.02, .54, .58, 1);
                -ms-transition: all .2s cubic-bezier(.02, .54, .58, 1);
                -o-transition: all .2s cubic-bezier(.02, .54, .58, 1);

                .input {
                    color: #707070;
                    font-size: 22rpx;
                    height: var(--com_num);
                    line-height: var(--com_num);
                }
            }
        }
    }

}

.pageNavDiy {
    padding-left: 28rpx;

    .isback {
        width: 72rpx;
        height: 58rpx;
    }

    .isinput {
        width: 430rpx;
        height: 58rpx;
        border: 1px solid #3B3B3B;
        border-radius: 14rpx;

        display: flex;
        align-items: center;

        .left {
            padding-left: 16rpx;

            .left-i {
                width: 32rpx;
                height: 32rpx;
            }
        }

        .input {
            flex: 1;
            padding: 0 12rpx;
            font-size: 24rpx;
            line-height: 24rpx;
            color: var(--tt);
        }

        .right {
            padding: 0 16rpx 0 12rpx;

            .right-i {
                width: 32rpx;
                height: 32rpx;
            }
        }
    }
}

.ios_safe {

    padding-bottom: constant(safe-area-inset-bottom);
    /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom);
    /*兼容 IOS>11.2*/
}

// 按钮阴影图片
.hasshadowbox {
    border: none !important;
}

.shadowbox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    pointer-events: none;

    .dow {
        height: 100%;
    }
}




// 渲染防止流白
.page_render {
    opacity: 0;

    &.can_show {
        opacity: 1;
    }

}

.hide_show {
    position: relative;

    &.on {
        .ishide {
            opacity: 1;
        }

        .isshow {
            opacity: 0;
        }
    }
}


.good_jdt {
    position: absolute;
    width: 330rpx;
    height: 4rpx;
    background-color: #000000;
    border-radius: 2rpx;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20rpx;
    z-index: 2;
    -webkit-border-radius: 2rpx;
    -moz-border-radius: 2rpx;
    -ms-border-radius: 2rpx;
    -o-border-radius: 2rpx;

    .pre {
        height: 4rpx;
        background-color: var(--color2);
        border-radius: 2rpx;
        width: 0;
        transition: all 0.3s;
        -webkit-border-radius: 2rpx;
        -moz-border-radius: 2rpx;
        -ms-border-radius: 2rpx;
        -o-border-radius: 2rpx;
    }
}






// 爱车首页 底部广告图
.mycar_dots {
    //position: absolute;
    //left: 50%;
    //transform: translateX(-50%);
    //top: 674rpx;
    //width: 252rpx;
    //height: 2rpx;
    display: flex;
    justify-content: center;
    column-gap: 6rpx;
    z-index: 2;
    //width: 336rpx;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    left: 50%;
    bottom: 10rpx;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);

    .item {
        width: 8rpx;
        height: 8rpx;
        background-color: #FFFFFF;
        border-radius: 4rpx;
        transition: all 0.3s;
        -webkit-border-radius: 4rpx;
        -moz-border-radius: 4rpx;
        -ms-border-radius: 4rpx;
        -o-border-radius: 4rpx;

        &.on {
            transform: scale(1.5);
            background-color: #1FD1C2;
            -webkit-transform: scale(1.5);
            -moz-transform: scale(1.5);
            -ms-transform: scale(1.5);
            -o-transform: scale(1.5);
        }
    }
}


.change_car_dots {

    .item {
        width: 46rpx;
        height: 12rpx;
        background: #999999;
        border-radius: 22rpx;
        transition: all 0.3s;
        -webkit-border-radius: 22rpx;
        -moz-border-radius: 22rpx;
        -ms-border-radius: 22rpx;
        -o-border-radius: 22rpx;
        margin: 0 6rpx;

        &.on {
            background-color: #FFFFFF;
        }
    }
}

.bannerjdt2 {
    position: absolute;
    width: 670rpx;
    height: 4rpx;
    border-radius: 2rpx;
    background-color: rgba($color: #ffffff, $alpha: 0.25);
    left: 50%;
    transform: translateX(-50%);
    bottom: 16rpx;
    z-index: 2;

    .pre {
        height: 4rpx;
        background-color: rgba($color: #ffffff, $alpha: 1);
        border-radius: 2rpx;
        width: 0;
        transition: all 0.3s;
    }
}